<template>
  <div class="fbxScarfBox"></div>
</template>

<script>
import CONTANT from "@/lib/contant.js";
import * as THREE from "@/static/three.module.js";
import { OrbitControls } from "@/static/controls/OrbitControls.js";
import { FBXLoader } from "@/static/loaders/FBXLoader.js";

export default {
  mounted() {
    let container, camera, scene, renderer, controls;

    init();
    animate();

    function init() {
      container = document.querySelector(".fbxScarfBox");

      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(
        window.innerWidth - CONTANT.LEFT_WIDTH,
        window.innerHeight - CONTANT.TOP_HEIGHT
      );
      container.appendChild(renderer.domElement);

      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(
        60,
        (window.innerWidth - CONTANT.LEFT_WIDTH) /
          (window.innerHeight - CONTANT.TOP_HEIGHT),
        0.01,
        1500
      );
      camera.position.set(0, 0, 800);

      const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
      hemiLight.position.set(0, 200, 0);
      scene.add(hemiLight);

      const dirLightFront = new THREE.DirectionalLight(0xffffff);
      dirLightFront.position.set(0, 0, 800);
      scene.add(dirLightFront);

      const dirLightBack = new THREE.DirectionalLight(0xffffff);
      dirLightBack.position.set(0, 0, -800);
      scene.add(dirLightBack);

      const path = CONTANT.URLPATH + "textures/skybox/";
      const format = ".jpg";
      const urls = [
        path + "ice-posx" + format,
        path + "ice-negx" + format,
        path + "ice-posy" + format,
        path + "ice-negy" + format,
        path + "ice-posz" + format,
        path + "ice-negz" + format,
      ];
      const textureCube = new THREE.CubeTextureLoader().load(urls);

      scene.background = textureCube;

      const loader = new FBXLoader();
      loader.load(CONTANT.URLPATH + "/models/fbx/scarf.fbx", function (object) {
        scene.add(object);
      });

      controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0, 0);
      controls.update();
    }

    function animate() {
      requestAnimationFrame(animate);
      render();
    }

    function render() {
      renderer.render(scene, camera);
    }
  },
};
</script>

<style>
.fbxScarfBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
